* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@import "./variables";
@import "./mixins";

html,
body {
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  line-height: 1.5;
  word-spacing: 1px;
  letter-spacing: 1px;
  color: #333;
  height: 100%;
  width: 100%;
}

header {
  background-color: $primary-color;
  height: $header-height;
  line-height: $header-height;
  display: flex;
  .brand {
    width: calc(#{$left-site-width} - 2rem);
    padding-left: 1rem;
    a {
      @include a-default;
    }
    img {
      width: 30px;
      height: 30px;
      vertical-align: middle;
    }
    .title {
      vertical-align: middle;
      color: #ffffff;
      font-size: 1.3rem;
      font-weight: bold;
    }
  }

  .right-bar {
    display: flex;

    .menus,
    .other-links {
      display: flex;
      .menu,
      .link {
        margin: 0 0.5rem;
        &.active,
        &:hover {
          a {
            padding-bottom: 3px;
            border-bottom: 2px solid #ffffff;
          }
        }
        a {
          @include a-default;
          font-size: 1rem;
          font-weight: normal;
        }
      }
    }

    .search {
      margin-left: 1rem;
      margin-right: 1rem;
      position: relative;
      input {
        padding: 0 0.5rem;
        outline: none;
        border: none;
        width: 15rem;
        height: 1.9rem;
        color: #666666;
        vertical-align: middle;
      }

      button {
        vertical-align: middle;
        padding: 0 0.5rem;
        height: 1.9rem;
        outline: none;
        border: none;
        cursor: pointer;
        background-color: #3498db;
        color: #ffffff;

        &:hover {
          background-color: #2980b9;
        }
      }
    }
  }
}
main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  margin: $header-height 0 $footer-height;
  display: flex;
  .left {
    width: $left-site-width;
    height: 100%;
    background-color: $primary-color;
    display: flex;
    flex-direction: column;

    .site-list {
      flex: 1;
      display: flex;
      flex-direction: column;
      // margin-top: 0.3rem;
      // height: 100%;
      overflow-x: auto;
      &:hover::-webkit-scrollbar {
        width: 4px;
      }
      &::-webkit-scrollbar {
        width: 0;
      }

      &::-webkit-scrollbar-track {
        background: #959595;
      }

      &::-webkit-scrollbar-thumb {
        background: #e67e22;
      }

      .site {
        display: flex;
        padding: 0.5rem 0.6rem;
        color: #ffffff;
        text-decoration: none;
        display: flex;
        cursor: pointer;

        &:hover,
        &.active {
          background-image: -webkit-gradient(
            linear,
            left top,
            right top,
            from(#ff8c31),
            to(#ff8c31)
          );
          a {
            color: $primary-color;
          }
        }

        img {
          vertical-align: middle;
          margin-right: 0.4rem;
          display: inline-block;
          width: 20px;
          height: 20px;
          margin-left: 0.3rem;
        }
        .text {
          font-size: 0.95rem;
          vertical-align: text-bottom;
        }
      }
    }
    .ad-area {
      height: 30px;
      width: 100%;
    }
  }
  .right {
    width: 100%;
    position: relative;
    .loading {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      display: none;
      width: 100%;
      height: 100%;
      z-index: 999;
      background-color: rbga(0, 0, 0, 0.5);
      @include loading;
    }
    .err {
      display: none;
      font-weight: bold;
      font-size: 1.3rem;
      color: red;
      text-align: center;
      margin-top: 3rem;
    }
    iframe {
      display: none;
      // visibility: hidden;
      border: none;
      outline: none;
      width: 100%;
      height: 100%;
      overflow-y: auto;
    }
  }
}
footer {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: $primary-color;
  height: $footer-height;
  line-height: $footer-height;
  text-align: center;
  color: #ffffff;
  a {
    color: #ffffff;
    text-decoration: none;

    &:hover {
      color: #e67e22;
    }
  }
  span {
    margin: 0 0.5rem;
  }
}
